<template>
	<view>
		<view v-if="isConnected">
			<!-- 顶部标题栏 -->
			<u-sticky>
				<!-- #ifndef MP-WEIXIN -->
				<!-- #endif -->
				<!-- 占位栏 -->
				<view class="w-100" :style="{marginTop:topbar+'px'}"></view>
				<!-- 页面标题 -->
				<view class="home_header pb6">
					<!-- 搜索 -->
					<view class="box">
						<view class="box-input">
						<u-search placeholder="请输入搜索关键词" v-model="keyword" :clearabled="true" :show-action="false" disabled @click="toPath('../search/search')">
							</u-search>
						</view>
					</view>
				    </view>
			</u-sticky>

            <view class="content-box" ></view>

			<tabbar :menuList="tabbarData"></tabbar>
		</view>
		<view v-else class="w-100" style="margin-top: 10vh;">
			<view class="notwifi"></view>
			<view class="notwifi_but notwifi_but_left">
				<u-button type="primary" size="mini" @click="retry">
					重新加载
				</u-button>
			</view>
			<view class="notwifi_but">
				<u-button type="warning" size="mini" @click="openSettings">
					设置网络
				</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		tokenLogin,
		autoLogin
	} from '@/common/http/api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		Mixins
	} from "../../minix/back.js";
	export default {
		// mixins: [Mixins],
		data() {
			return {
				CityName: '',
				topbar: 50,
				currpage: 1,
				status: 'loading',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '～没有啦～'
				},
				longitude: '', //经度
				latitude: '', //维度
				navbarTitle: "正在定位中...",
				isback: true,
				backText: '',
				backIconName: 'map',
				background: {
					backgroundImage: 'linear-gradient(-90deg, rgb(254, 78, 94, 1.0), rgb(243, 162, 0, 1.0))'
				},
				isConnected: true, //网络状态
				networkType: '', //网络类型
				keyword: "",
				bannerData: [], //轮播

			}
		},
		computed: {
			...mapState(['userInfo', 'hasLogin', 'tabbarData']),
		},
		onShow() {
			
		},
		onLoad() {
			// console.log(getApp().globalData,"XXXXXXXXXXXXX")
			this.topbar = getApp().globalData.customBar;
			// #ifdef APP

			// #endif
			// #ifdef MP-WEIXIN
			// 经纬度定位
			
			// #endif
		},
		//页面上拉触底事件的处理函数
		onReachBottom() {
			let that = this;
			return false;
		},
		//监听用户下拉动作
		onPullDownRefresh() {
			uni.startPullDownRefresh();
			let that = this;
			this.status = 'loading '
			this.currpage = 1;
        
			uni.hideNavigationBarLoading(); //结束加载
			uni.stopPullDownRefresh(); //结束下拉刷新
		},
		mounted() {
			// 网络检测start
			var _self = this;
			//检查
			uni.getNetworkType({
				success: function(res) {
					_self.networkType = res.networkType;
					if (res.networkType == 'none') {
						_self.isConnected = false;
					} else {
						_self.isConnected = true;
					}
				}
			});
			//监听
			uni.onNetworkStatusChange(function(res) {
				_self.isConnected = res.isConnected;
				_self.networkType = res.networkType;
				if (res.isConnected && res.networkType != 'wifi') {
					_self.$api.msgb("当前网络为:" + res.networkType + "请注意浏览使用")
				}
			});
			// 网络检测end
		},
		methods: {
			...mapMutations(['login', 'logout']),
			// ==========网络检测start==========
			async openSettings() {
				if (this.networkType == "none") {
					// #ifdef APP
					var Intent = plus.android.importClass("android.content.Intent");
					var Settings = plus.android.importClass("android.provider.Settings");
					var mainActivity = plus.android.runtimeMainActivity();
					var intent = new Intent(Settings.ACTION_SETTINGS);
					mainActivity.startActivity(intent);
					return;
					// #endif
				}
			},
			// 重新加载
			retry() {
				uni.getNetworkType({
					success: (res) => {
						this.networkType = res.networkType;
						if (res.networkType == 'none') {
							uni.showToast({
								title: '无网络连接',
								icon: 'none',
								position: 'bottom'
							})
							this.isConnected = false;
						} else {
							uni.showToast({
								title: '网络已连接',
								icon: 'none',
								position: 'bottom'
							})
							this.isConnected = true;
						}
					}
				});
			},
			// ========网络检测end============

			navigateTo(url) {
				uni.navigateTo({
					url: url,
					animationType: 'zoom-out',
					animationDuration: 500
				});
			},

			 
			// 轮播
			async storeAdvertisingListHttp() {
				await storeAdvertisingList({
					"adpId": 1,
					"size": 5
				}).then(res => {
					this.bannerData = res.data;
				})
			},
			  
			//搜索
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search?type=home'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f9f9f9;
	}

	.notwifi {
		width: 350upx;
		height: 350upx;
		float: left;
		margin: 0 200upx;
		margin-top: 150upx;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.notwifi_but {
		width: 150upx;
		height: 50upx;
		float: left;
		margin: 10px 20px;
	}

	.notwifi_but_left {
		margin-left: 170upx;
	}

	// .slot-wrap {
	// 		display: flex;
	// 		align-items: center;
	// 		/* 如果您想让slot内容占满整个导航栏的宽度 */
	// 		/* flex: 1; */
	// 		/* 如果您想让slot内容与导航栏左右有空隙 */
	// 		/* padding: 0 30rpx; */
	// 	}
	.home_header {
		// background-color: #fff;
	}

	.b-b {
		position: relative;
	}

	.b-b:after,
	.b-t:after {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		height: 0;
		content: '';
		transform: scaleY(.5);
		border-bottom: 1px solid #E4E7ED;
	}

	.b-b:after {
		bottom: 0;
	}

	.b-t:after {
		top: 0;
	}
	
	.content-box{
		display: flex;
		height: 1000px;
		background-color: #E4E7ED;
	}

</style>